<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>01-VueRouter的使用</title>
    <style>
      .selected {
        color: yellow;
        font-size: 30px;
      }
      a {
        color: rgb(24, 24, 88);
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>vue的例子</h1>
      <p>{{msg}}</p>
      <hr />
      <router-link to="/home">主页</router-link>
      <router-link to="/cart">购物车</router-link>
      <router-link to="/user">用户页面</router-link>
      <router-view></router-view>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <script>
      Vue.config.productionTip = false // 关闭生产提示
      Vue.use(VueRouter)
      const Home = {
        template: `
                  <div>
                      <h2>这是主页Home</h2>
                      <button @click="changeRoute">去用户界面</button>
                      <button @click="goBtn">回退</button>
                      
                  </div>
              `,
        methods: {
          changeRoute() {
            // console.log(this.$router);
            this.$router.push('/user')
          },
          goBtn() {
            this.$router.go(-1)
          },
        },
      }
      const Cart = {
        template: `
                  <div>
                      <h2>这是购物页面Cart</h2>
                      <router-link to="/cart/computer">电脑商城</router-link>
                      <router-link to="/cart/phone">手机商城</router-link>
                      <router-link to="/cart/tv">电视商城</router-link>
                      <router-view></router-view>
                      <button @click="forwordBtn">前进</button>
                  </div>
              `,
              methods: {
          forwordBtn() {
            this.$router.go(1)
          },
        },
      }
      const User = {
        template: `
                  <div>
                      <h2>这是用户页面User</h2>
                  </div>
              `,
      }

      //这是Cart的子组件
      const Computer = {
        template: `
                  <div>
                      <h2>Computer这是电脑商城界面</h2>
                  </div>
              `,
      }
      const Phone = {
        template: `
              <div>
                  <h2>Phone手机商城</h2>
              </div>
              `,
      }
      const Tv = {
        template: `
              <div>
                  <h2>TV电视机商城</h2>
              </div>
              `,
      }
      const router = new VueRouter({
        linkActiveClass: 'selected',
        routes: [
          { path: '/', redirect: '/home' },
          { path: '/home', component: Home },
          {
            path: '/cart',
            component: Cart,
            children: [
              { path: '/cart/computer', component: Computer },
              { path: '/cart/phone', component: Phone },
              { path: '/cart/tv', component: Tv },
            ],
          },
          { path: '/user', component: User },
        ],
      })
      const vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello',
        },
        router,
      })
    </script>
  </body>
</html>
